
<template>
  <div id="content">
    <div id="map" ref="map"></div>
    <div id="mouse-position">
      <el-checkbox label="天地图影像图" v-model="imageChecked" @change="changImage"></el-checkbox>
      <el-checkbox label="天地图影像标注" v-model="textChecked" @change="changText"></el-checkbox>
    </div>
  </div>
</template>

<script>

import { ref, reactive, onMounted } from 'vue';
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";


export default {
  name: "shadow",
  setup() {
    let map = ref(null);
    let mapObj = null;

    onMounted(() => {
      initMap();
    })

    const initMap = () => {
      let target = "map";
      let tileLayer = [
        new TileLayer({
          source: new XYZ({
            url:
              "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
          })
        })
      ];
      let view = new View({
        center: fromLonLat([104.912777, 34.730746]),
        zoom: 4.5
      });
      mapObj = new Map({
        target: target,
        layers: tileLayer,
        view: view
      });

    }
    let imageChecked = ref(false);
    let TiandiMap_img = null;
    const changImage = () => {
      console.log("imageChecked", imageChecked.value)
      if (imageChecked.value) {
        TiandiMap_img = new TileLayer({
          name: "天地图影像图层",
          source: new XYZ({
            url:
              "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d", //parent.TiandituKey()为天地图密钥
            wrapX: false
          })
        });
        console.log("增加overlay")
        // 添加到地图上
        mapObj.addLayer(TiandiMap_img);
      } else {
        console.log("删除overlay")
        mapObj.removeLayer(TiandiMap_img);
      }
    }
    let textChecked = ref(false);
    let TiandiMap_cia = null;
    const changText = () => {
      if (textChecked.value) {
        TiandiMap_cia = new TileLayer({
          name: "天地图影像注记图层",
          source: new XYZ({
            url:
              "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d", //parent.TiandituKey()为天地图密钥
            wrapX: false
          })
        });
        // 添加到地图上
        mapObj.addLayer(TiandiMap_cia);
      } else {
        mapObj.removeLayer(TiandiMap_cia);
      }
    }

    return {
      map,
      imageChecked,
      textChecked,
      changImage,
      changText
    }
  }
};
</script>

<style lang="scss" scoped>
#map-con {
  height: 90vh;
}

#map {
  width: 100vw;
  height: 90vh;
}

html,
body {
  height: 100%;

  #content {
    width: 100%;
    position: relative;

    #mouse-position {
      float: left;
      position: absolute;
      top: 75px;
      right: 10px;
      width: 200px;
      height: 50px;
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
      z-index: 2000;
      color: white;

      .el-checkbox {
        color: white;
      }

      /* 鼠标位置信息自定义样式设置 */
      .custom-mouse-position {
        color: rgb(0, 0, 0);
        font-size: 16px;
        font-family: "微软雅黑";
      }
    }
  }
}
</style>
